<template>
  <div class="top-search">
    <div id="myChart" ref="topSearch" :style="{width: '300px', height: '350px'}" />
  </div>
</template>

<script>
import 'echarts-wordcloud'
export default {
  data() {
    return {

    }
  },
  mounted() {
    this.drawLine()
  },
  methods: {
    drawLine() {
      var myChart = this.$echarts.init(this.$refs.topSearch)
      myChart.setOption({
        tooltip: {
          show: true
        },
        series: [
          {
            type: 'wordCloud',
            gridSize: 6,
            // shape: 'diamond',
            sizeRange: [20, 40], // 字体显示的范围
            width: 400,
            height: 400,
            textStyle: {
              normal: {
                color: function() {
                  return (
                    'rgb(' +
                    [
                      Math.round(Math.random() * 160),
                      Math.round(Math.random() * 160),
                      Math.round(Math.random() * 160)
                    ].join(',') +
                    ')'
                  )
                }
              },
              emphasis: {
                shadowBlur: 10,
                shadowColor: '#333'
              }
            },
            data: [
              {
                name: ' 特斯拉Model S',
                value: 30
              },
              {
                name: '天生要强',
                value: 24
              },
              {
                name: ' 华为p20',
                value: 21
              },
              {
                name: '杜兰特',
                value: 19
              },
              {
                name: '三只松鼠',
                value: 18
              },
              {
                name: 'Mac Pro',
                value: 18
              },
              {
                name: 'Iphone12 Pro',
                value: 17
              },
              {
                name: '玛莎拉蒂',
                value: 12
              },
              {
                name: '小米手机',
                value: 12
              },
              {
                name: '保时捷',
                value: 11
              }
            ]
          }
        ]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.top-search{
  background-color: #16223c;
}
</style>
